<template>
  <div
    :class="`card ${dataKey}-card ${
      dataKey == 'common' && componentData.bgImg ? componentData.bgImg : ''
    } `"
    @click="onRouteUrl(dataKey)"
    :style="{
      cursor:
        (isTotalOverview ||
          (dataKey === 'common' && componentData.url.length > 0)) &&
        $route.name !== 'dragReport'
          ? 'pointer'
          : 'auto',
    }"
  >
    <el-col
      :span="8"
      style="
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <i
        v-if="isIcon"
        :class="`${
          dataKey == 'common'
            ? componentData.icon
            : 'iconfont icon-' + comData[dataKey].icon
        } menuIcon`"
        style="color: #fff; font-size: 36px"
      ></i>
      <img
        :src="`../../../../../../../../static/images/reportMgr/icon/${comData[dataKey].icon}.svg`"
        v-else
        style="color: #fff; font-size: 36px"
      />
    </el-col>
    <el-col :span="16" class="card-content">
      <el-row class="card-content-item-2row">
        <div class="card-content-item itemCardTxt">
          <p
            v-if="isTotalOverview"
            style="color: #fff"
            @click="onRouteUrl(dataKey)"
          >
            {{ comData[dataKey].title }}
          </p>
          <p style="color: #fff" v-else-if="dataKey !== 'common'">
            {{ comData[dataKey].title }}
          </p>
          <p style="color: #fff" v-else>{{ mainTitle }}</p>
        </div>
        <el-row>
          <el-row
            v-for="(item, index) in myItems[dataKey]"
            :key="index"
            :style="{
              fontSize: myItems[dataKey].length == 1 ? '20px' : '12px',
            }"
            class="title-value"
          >
            <el-tooltip
              v-if="componentData.tooltipList && dataKey === 'common'"
              effect="dark"
              :disabled="!componentData.tooltipList[index]"
              :content="componentData.tooltipList[index]"
              placement="top"
            >
              <span>
                {{ item.label ? item.label + '：' + item.value : item.value }}
                <span>{{ item.unit }}</span></span
              >
            </el-tooltip>
            <span v-else>
              {{ item.label ? item.label + '：' + item.value : item.value }}
              <span>{{ item.unit }}</span></span
            >
          </el-row>
        </el-row>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import nt from '../../../../../network'
import parseApi from '../../../../utils/parseApi'

export default {
  name: 'custom-report-component-title-title',
  props: {
    api: {},
    method: {
      type: String,
      default: 'get',
    },
    dataKey: {},
    mainTitle: {},
    time: {},
    componentData: {},
    changeSize: {},
    changeData: {},
    interval: {},
    mixinParam: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      comInterval: 0,
      //兼容img图标和icon图标
      isTotalOverview: false,
      isDataReady: false,
      isIcon: true,
      isUseTenantId: false,
      myItems: {
        common: [
          {
            // label: '资产类别数量',
            value: '--',
          },
        ],
        'lb-res': [
          {
            // label: '负载均衡',
            value: '--',
          },
        ],
      },
      comData: {
        common: {
          title: '',
          icon: '',
        },
        'lb-res': {
          icon: 'res-fzjh',
          title: '负载均衡',
        },
      },
    }
  },
  methods: {
    onRouteUrl(type) {
      if (
        this.dataKey === 'common' &&
        this.componentData.url.length > 0 &&
        this.$route.name !== 'dragReport'
      ) {
        this.$router.push({
          path: this.componentData.url[this.componentData.url.length - 1],
        })
      }
    },
    getCommonTitleData(newApi) {
      let parseTitleData = (data) => {
        // this.comData[this.dataKey].title = data.label
        this.myItems[this.dataKey] = []
        if (!this.componentData.tooltipList || newApi) {
          this.componentData.tooltipList = []
          data.valueList.forEach((item, i) => {
            this.myItems[this.dataKey].push({
              label: item.name,
              value: item.data,
              unit: item.unit,
            })
            this.componentData.tooltipList.push('')
          })
          this.$emit( 'changeTitleTooltip', this.componentData.tooltipList)
        } else {
          data.valueList.forEach((item, i) => {
            this.myItems[this.dataKey].push({
              label: item.name,
              value: item.data,
              unit: item.unit,
            })
          })
        }
        if (!this.isDataReady) {
          this.isDataReady = true
          this.$emit( 'dataReady')
        }
      }
      if (!this.api || !this.api.reqUrl) {
        let data = {
          valueList: [
            //方格的数据，常见为一项，建议不超过三项影响样式
            {
              name: '示例数据1', //每行的label，如果返回此项，展示格式为name:data,如果不返回则只显示data
              data: 120, //每行的具体数据，可拼接好字符串或者直接显示数字
              unit: '个', //data后单位
            },
            {
              name: '示例数据2',
              data: 220,
              unit: '只',
            },
          ],
        }
        parseTitleData(data)
      } else {
        nt.doRequest({
          method: 'post',
          uri: '/paas/chart-layout/v1/compdsconfig/testCompDSConfig',
          data: parseApi({
            api: this.api,
            time: this.time,
            mixinParam: this.mixinParam,
          }),
          onSuccess: (resp) => {
            let data = resp.data.content.content
            if (!data || JSON.stringify(data) === '{}') {
              return
            }
            parseTitleData(data)
          },
          onError: () => {},
        })
      }
    },
    changeParam() {
      if (this.api) {
        this.getCommonTitleData()
        clearInterval(this.comInterval)
        if (this.interval) {
          this.comInterval = setInterval(() => {
            this.getCommonTitleData()
          }, this.interval * 1000)
        }
      }
    },
  },
  created() {
    if (this.dataKey === 'lb-res') {
      this.isIcon = false
    } else if (this.dataKey === 'common') {
      this.getCommonTitleData()
      if (this.interval) {
        this.comInterval = setInterval(() => {
          this.getCommonTitleData()
        }, this.interval * 1000)
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.comInterval)
  },
  watch: {
    'api.dsName': function () {
      this.getCommonTitleData(true)
    },
    time() {
      this.changeParam()
    },
    mixinParam: {
      handler: function (val, oldVal) {
        this.changeParam()
      },
      deep: true,
    },
    // changeData() {
    //   if (this.interval) {
    //     this.getCommonTitleData()
    //   }
    // }
  },
  emits: ['changeTitleTooltip', 'dataReady'],
}
</script>

<style scoped>
.card {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  background-size: cover;
  background-repeat: no-repeat;
}
.itemCardTxt {
  margin-top: -5px;
  margin-bottom: 5px;
}
.card-content {
  height: 100%;
}
.card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title-value {
  font-size: 12px;
  width: 100%;
  text-align: left;
  color: #ffffff;
}
.resource-card,
.host-res-card,
.count-clu-card,
.acc-clu-card,
.count-app-card,
.common-card.myres {
  background-image: url('../../../../../../../assets/images/consolePage/myres.svg');
}
.cluster-card,
.storage-res-card,
.node-clu-card,
.group-app-card,
.used-asset-card,
.common-card.myclust {
  background-image: url('../../../../../../../assets/images/consolePage/myclust.svg');
}
.asset-card,
.lb-res-card,
.pod-clu-card,
.resAcc-app-card,
.unused-asset-card,
.common-card.myasset {
  background-image: url('../../../../../../../assets/images/consolePage/myasset.svg');
}
.service-card,
.room-res-card,
.req-clu-card,
.pod-app-card,
.category-asset-card,
.common-card.mysercvice {
  background-image: url('../../../../../../../assets/images/consolePage/mysercvice.svg');
}
.app-card,
.count-asset-card,
.common-card.myapp {
  background-image: url('../../../../../../../assets/images/consolePage/myapp.svg');
}
</style>
